<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.ort">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style type="text/css">
        .layui-table-cell{
            height: auto;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div class="layui-panel" style="padding: 8px;">
    <div class="layui-table-cell">
        <table id="categoryTable" lay-filter="categoryTable"></table>
    </div>
</div>

<script id="tool" type="text/html">
    <a class="layui-btn layui-btn-wram " lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger " lay-event="delete">删除</a>
</script>

<script id="tableBar" type="text/html">
    <a class="layui-btn layui-btn-wram layui-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        添加
    </a>
</script>
<script id="icon" type="text/html">
    <img src="/file/fc/showImg/{{d.iconPath}}" style="width: 70px;height: 49px;">

</script>
<script id="photo" type="text/html">
    <img src="/file/fc/showImg/{{d.photoPath}}" style="width: 70px;height: 49px;">
</script>

<script>
    layui.config({
        base:'../../../js/'
    })
    var $;
    layui.use(['jquery','treeTable','layer','table'],function(){
        var treeTable=layui.treeTable,
        layer=layui.layer;
        $=layui.jquery;
        treeTable.render({
            elem:'#categoryTable',
            height:'full-70',
            page:true,
            toolbar:'#tableBar',
            url:'/category/cc/find',
            tree:{
                iconIndex:1,//图表列的下标值
                isPidData:true,//是否为树型
                idName:'id',//id唯一值的列属性名
                pidName:'pid',//父id的列属性名
                openName:true//是否默认打开
            },
            cols:[
                [
                {type:'checkbox',fixed:'left'},
                {field:'title',title:'类目名',width:130,align:'center'},
                {field:'iconPath',title:'类目图标',width:150,templet:'#icon',align:'center'},
                {field:'photoPath',title:'类目图片',width:150,templet:'#photo',align:'center'},
                {field:'keyword',title:'关键字',width:130,align:'center'},
                {field:'introduction',title:'简介',align:'center'},
                {field:'level',title:'级别',width:130,align:'center',
                    templet:function (obj) {
                        var level = obj.level;
                        var str = "";
                        if(level == 0){
                            str = " <button type=\"button\" class=\"layui-btn layui-btn-sm layui-btn-radius\">一级类目</button>"
                        }else if(level == 1){
                            str = "<button type=\"button\" class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-normal\">二级类目</button>"
                        }
                        return str;
                    }
                },
                {fixed:'right',title:'操作',width:180,align:'center',toolbar:'#tool'}
            ]
            ]
        })
        var active={
            addOrUpdate:function (content){
                var b=false;
                top.layer.open({
                    type:2,
                    content:content,
                    area:['820px','775px'],
                    btn:['确认保存','取消关闭'],
                    btn1:function (i,o){
                        b=true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                },
                    end:function (){
                        if (b) layui.treeTable.reload('categoryTable');
                    }
                })
            },
            deleteCategory:function (id) {
                layer.confirm('确实删除该记录吗？', function (index) {
                    if (index > 0) {
                        $.ajax({
                            type: 'post',
                            url: '/category/cc/delete',
                            data: {
                                id: id
                            },
                            dataType: 'json',
                            success: function (result) {
                                layer.msg(result.msg);
                                if (result.is) {
                                    layui.treeTable.reload('categoryTable');
                                }
                            }
                        })
                    }
                    layer.close(index);
                })
            }
        }
        treeTable.on('toolbar(categoryTable)',function (obj){
            var event=obj.event;
            if("add"==event){
                active.addOrUpdate('/page/category/categoryAdd');
            }
        })
        treeTable.on('tool(categoryTable)',function (obj){
            var event=obj.event;
            if ("edit"==event){
                active.addOrUpdate('/category/ud/categoryEdit/'+obj.data.id);
            }
            if ("delete"==event){
                active.deleteCategory(obj.data.id);
            }
        })
    })
</script>
</body>
</html>
